<template>
    <div class="inapplyinfo-box">
        <div class="button-box-applyInfo">
            <template v-if="type!=='1'">
                <el-button type="success" @click="openAdd" icon="el-icon-plus" size="small"
                >选择出库单
                </el-button>
            </template>
        </div>

        <br>

        <div class="selectedGoods-box">
            <el-card class="box-card" style="width: 95%">
                <template #header>
                    <div class="card-header">
                        <span>返厂信息</span>
                    </div>
                </template>
                <el-card class="box-card-in" style="width: 24.8%">
                    <span class="approve">出库单号：&emsp;&emsp;</span>
                    <span class="approve">{{odoCode}}</span>
                </el-card>
                <el-card class="box-card-in" style="width: 24.8%">
                    <span class="approve">返厂地点：&emsp;&emsp;</span>
                    <span class="approve">{{refacLocation}}</span>
                </el-card>
                <el-card class="box-card-in" style="width: 24.8%">
                    <span class="approve">制单人：&emsp;&emsp;</span>
                    <span class="approve">{{outApplyCreateBy}}</span>
                </el-card>
                <el-card class="box-card-in" style="width: 24.8%">
                    <span class="approve">创建时间：&emsp;&emsp;</span>
                    <span class="approve">{{outApplyCreatedTime}}</span>
                </el-card>
            </el-card>

            <el-card class="box-card" style="width: 95%">
                <template #header>
                    <div class="card-header">
                        <span>入库商品信息</span>
                    </div>
                </template>
                <el-table height="250" border :data="selectedGoodList" :stripe="true"
                          style="width: 95%">

                    <el-table-column type="index" width="50" label="序号"></el-table-column>

                    <el-table-column prop="goodImei" label="商品串号"></el-table-column>

                    <el-table-column prop="goodName" label="商品名称"></el-table-column>

                    <el-table-column prop="goodType" label="商品类型"></el-table-column>

                    <el-table-column prop="goodBrand" label="商品品牌"></el-table-column>

                    <el-table-column prop="goodModel" label="商品型号"></el-table-column>

                    <el-table-column prop="goodColor" label="商品颜色"></el-table-column>

                    <el-table-column prop="goodProvider" label="商品供应商"></el-table-column>

                    <el-table-column prop="goodMessage" label="商品追踪信息"></el-table-column>

                    <el-table-column prop="newImei" label="维修类型">
                        <template #default="slotProps" :rules="true">
                            <el-select v-model="slotProps.row.refacType" placeholder="请选择" size="mini"
                                       @change="flagChange(slotProps.row)" :disabled="type==='1'">
                                <el-option v-for="item in [{value:0,label:'维修'},{value:1,label:'换新'}]"
                                           :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>

                    <el-table-column prop="newImei" label="新串码" >
                        <template #default="slotProps">
                            <el-input v-model="slotProps.row.newImei" placeholder="请输入内容"
                                      :disabled="slotProps.row.refacType===0 ||type==='1'" size="mini"></el-input>
                        </template>
                    </el-table-column>

                </el-table>
            </el-card>
        </div>

        <br>

        <div>
            <el-card class="box-card" style="width: 95%">
                <el-form label-width="80px">

                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="comments" style="width: 400px"
                                  size="small" :disabled="type==='1'"></el-input>
                    </el-form-item>

                </el-form>
            </el-card>
        </div>

        <br>

        <div class="approve-info" style="width: 95%">
            <el-card class="box-card" v-if="type==='1'">
                <template #header>
                    <div class="card-header">
                        <span>入库审核信息</span>
                    </div>
                </template>
                <el-card class="box-card-in" style="width: 33%">
                    <span class="approve">审核人：&emsp;&emsp;</span>
                    <span class="approve">{{approver}}&emsp;&emsp;</span>
                </el-card>
                <el-card class="box-card-in" style="width: 33%">
                    <span class="approve">审核日期：&emsp;&emsp;</span>
                    <span class="approve" :formatter="formatter">{{formatApproveTime}}&emsp;&emsp;</span>
                </el-card>
                <el-card class="box-card-in" style="width: 33%">
                    <span class="approve">审核状态：&emsp;&emsp;</span>
                    <span class="approve" v-if="approveStatus===0">审核未通过</span>
                    <span class="approve" v-if="approveStatus===1">未审核</span>
                    <span class="approve" v-if="approveStatus===2">已通过</span>
                </el-card>
                <el-card style="width: 99.2%">
                    <template #header>
                        <div class="card-header">
                            <span class="approve">审核意见</span>
                        </div>
                    </template>
                    <span class="approve">{{approverComments}}</span>
                </el-card>
            </el-card>
        </div>

        <br>

        <div class="applyInfo-buttons">
            <el-button type="success" icon="el-icon-plus" v-if="type==='2'" @click="saveNewApply">生成入库单</el-button>
            <el-button type="warning" icon="el-icon-edit" v-if="type==='0'" @click="alterApply">修改</el-button>
            <el-button type="primary" icon="el-icon-back" @click="returnMan">返回</el-button>
        </div>

        <el-dialog title="·选择出库申请单" :visible.sync="dialogTableVisible" style="width: 100%">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="入库单号">
                    <el-input placeholder="出库单号" v-model="search.odoCode"></el-input>
                </el-form-item>
                <el-form-item label="制单人">
                    <el-input placeholder="制单人" v-model="search.createBy"></el-input>
                </el-form-item>
                <el-form-item label="制单日期">
                    <el-date-picker
                            v-model="createTime"
                            @change="chooseTime"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="left">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="findPage" icon="el-icon-search">搜索</el-button>
                    <el-button type="warning" @click="resetForm" icon="el-icon-refresh-right">重置</el-button>
                </el-form-item>
            </el-form>

            <el-table height="400" border :data="applyList" :stripe="true" style="width: 100%">

                <el-table-column type="index" width="50" label="序号"></el-table-column>

                <el-table-column prop="odoCode" label="返厂出库单号"></el-table-column>

                <el-table-column prop="status" label="返厂出库标志">
                    <template #default="slotProps">
                        <span v-if="slotProps.row.status===0">未出库</span>
                        <span v-if="slotProps.row.status===1">已出库</span>
                    </template>
                </el-table-column>

                <el-table-column prop="createBy" label="制单人"></el-table-column>

                <el-table-column prop="createTime" label="制单时间" :formatter="creatFormatter"></el-table-column>

                <el-table-column label="操作">
                    <template #default="slotProps">
                        <el-button type="primary" round size="mini" @click="showInfo(slotProps.row.id)">查看</el-button>
                        <el-button type="warning" round size="mini" @click="choose(slotProps.row.id)">选择</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-dialog width="60%" title="出库单详情" :visible.sync="innerVisible" append-to-body>
                <router-view/>
            </el-dialog>

        </el-dialog>

    </div>
</template>

<script>
    import inApplyInfo from './index'

    export default inApplyInfo;
</script>

<style scoped src="./index.scss" lang="scss">

</style>